<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="custom-navigation flex align-center justify-between">
			<text class="title">{{web_name}}</text>
			<!-- <router-link to="/pages/webview/kefu" >
				<u-icon name="kefu-ermai" color="#333" size="48"></u-icon>
			</router-link> -->
			<view >
				<u-icon name="kefu-ermai" color="#333" size="48"  @click="copy('95766229')"></u-icon>
			</view>
		</view>
		<view class="header-wrapper">
			<view class="recognize-tip-wrapper flex align-center justify-between" v-if="!isRecognizeComplate">
				<text class="recognize-text">完成实名认证，领取更多豪礼</text>
				<u-button ripple :custom-style="customStyle" @tap="toRecognize">立即认证</u-button>
				<u-icon name="close" color="#333" size="24" @click="isRecognizeComplate=true"></u-icon>
			</view>
			<u-swiper name="src" height="280" mode="rect" class="swiper" :list="list"></u-swiper>
			<view class="menu-wrapper flex justify-between">
				<view class="menu-option flex flex-column justify-center" @tap="inviteJoin">
					<text class="title">邀请好友</text>
					<text class="desc">邀请赚佣金</text>
				</view>
				<view class="menu-option flex flex-column justify-center" @tap="handleAccount">
					<text class="title">{{getAccount[0]}}</text>
					<text class="desc">{{getAccount[1]}}</text>
				</view>
			</view>
		</view>
		<view class="stock-news">
			<view class="header flex align-center">
				<text class="title">公告</text>
				<u-notice-bar font-size="24" color="#333" class="notice-bar" type="none" mode="vertical"
					:list="noticeList" @click="handleNews"></u-notice-bar>
			</view>
			<view class="stock-list flex justify-between">
				<view  class="stock-item" v-for="(item) in priceList" :key="item.pid" @tap="toStockDetail(item)">
					<view class="stock-name">{{item.name}}</view>
					<view class="stock-value">{{item.Price}}</view>
					<view class="flex mt-10 justify-between hangqing-kuai">
						<text class="fluctuate" :style="{color:item.change_num>=0?getUpColor:getDownColor}">{{item.change_num>=0?'+'+item.change_num:item.change_num}}</text>
						<text class="percent" :style="{color:item.change_num>=0?getUpColor:getDownColor}">{{item.change>=0?'+'+(parseFloat(item.change)*100).toFixed(2):(parseFloat(item.change)*100).toFixed(2)}}%</text>
					</view>
				</view>
			</view>
		</view>

		<view class="order-total">
			<view class="header flex justify-between align-center">
				<text class="title">交易数据</text>
				<tab :tabs="tabs" :active="tabActive" @change="handleTabChange"></tab>
			</view>
			<view class="order-list flex justify-between">
				<view class="order-item">
					<view class="charts-box flex justify-center">
						<view :prop="chartData1" :change:prop="echarts.updateEcharts" id="echarts-1" class="echarts">
						</view>
						<view class="order-text-wrapper flex flex-column">
							<text class="order-text">{{c_openPositions[0][0]}}</text>
						</view>
					</view>
					<view class="flex mt-30 align-center justify-center">
						<text class="dot-blue"></text>
						<text class="order-percent">多 {{c_openPositions[0][1]}}</text>
					</view>
					<view class="flex mt-10 align-center justify-center">
						<text class="dot-orange"></text>
						<text class="order-percent">空 {{c_openPositions[0][2]}}</text>
					</view>
				</view>
				<view class="order-item">
					<view class="charts-box flex justify-center justify-center">
						<view :prop="chartData2" :change:prop="echarts.updateEcharts" id="echarts-2" class="echarts">
						</view>
						<view class="order-text-wrapper flex flex-column">
							<text class="order-text">{{c_openPositions[1][0]}}</text>
						</view>
					</view>
					<view class="flex mt-30 align-center justify-center">
						<text class="dot-blue"></text>
						<text class="order-percent">多 {{c_openPositions[1][1]}}</text>
					</view>
					<view class="flex mt-10 align-center justify-center">
						<text class="dot-orange"></text>
						<text class="order-percent">空 {{c_openPositions[1][2]}}</text>
					</view>
				</view>
				<view class="order-item">
					<view class="charts-box flex justify-center">
						<view :prop="chartData3" :change:prop="echarts.updateEcharts" id="echarts-3" class="echarts">
						</view>
						<view class="order-text-wrapper flex flex-column">
							<text class="order-text">{{c_openPositions[2][0]}}</text>
						</view>
					</view>
					<view class="flex mt-30 align-center justify-center">
						<text class="dot-blue"></text>
						<text class="order-percent">多 {{c_openPositions[2][1]}}</text>
					</view>
					<view class="flex mt-10 align-center justify-center">
						<text class="dot-orange"></text>
						<text class="order-percent">空 {{c_openPositions[2][2]}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="news-list">
				<view class="header flex justify-between align-center">
					<text class="title">全球资讯</text>
					<router-link class="flex align-center" to="/pages/newsList/newsList">
						<text class="more-text">更多</text>
						<u-icon name="play-right-fill" size="10" color="#999"></u-icon>
					</router-link>
				</view>
				<view class="news-list-content">
					<view class="hot-icon"></view>
					<router-link  :to="{path:'/pages/newsDetail/newsDetail',query:{info:JSON.stringify(item).replace(/%/g,'%25')}}"  class="stock-item flex justify-between" v-for="(item) in xinwen" :key="item.id">
						<view class="stock-title">{{item.title}}</view>
						<view class="stock-time">{{$u.timeFrom(new Date(item.time).getTime(),false)}}</view>
					</router-link>
				</view>
		</view>
		<u-popup v-model="recognizeFlag" mode="center" border-radius="14" @close="recognizePopupClose" closeable>
			<view class="recognize-wrapper flex flex-column justify-center align-center">
				<view class="recognize-bg"></view>
				<text class="recognize-tip-text">根据监管要求, 请完善身份认证 联系客服还有机会领取 <text class="up-color">红包福利</text></text>
				<view class="flex justify-between mt-30">
					<view class="service-btn">咨询客服</view>
					<view class="recognize-btn" @tap="toRecognize">立即认证</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show-title="false" show-cancel-button v-model="loginDialogFlag" confirm-text="去登陆" @confirm="toLogin" confirm-color="#1677FF" content="你好,登录后方可邀请好友"></u-modal>
		<u-modal :show-title="false" show-cancel-button v-model="switchAccountDialogFlag"  @confirm="toSwitchAccount" content="确定切换至真实账户?"></u-modal>
	</view>

</template>

<script>
	import _ from "lodash"
	import {
		mapState,
		mapGetters,
		mapMutations
	} from "vuex"
	const option = {
		tooltip:{show:false},
		series: [{
			type: 'pie',
			hoverAnimation:false,
			itemStyle: {
				color: function({
					dataIndex
				}) {
					if (dataIndex == 0) {
						return "#1677FF"
					} else {
						return "#FF6010"
						
					}
				},
				borderWidth: 2,
				borderColor: '#fff',
			},
			radius: ['75%', '95%'],
			label: {
				show: false
			},
			data: [{
					value: 10
				},
				{
					value: 20,
				},
			],
		}]
	};
	export default {
		data() {
			return {
				//切换真实账号弹窗
				switchAccountDialogFlag:false,
				//登入对话框
				loginDialogFlag:false,
				//实名认证弹框
				recognizeFlag: false,
				//是否实名
				isRecognizeComplate:false,
				//首页数据
				homeData: {},
				//认证按钮样式
				customStyle: {
					marginLeft: "10rpx",
					marginRight: "auto",
					width: "120rpx",
					height: " 40rpx",
					background: "#1677FF",
					borderRadius: "23rpx",
					lineHeight: "40rpx",
					textAlign: "center",
					fontSize: "20rpx",
					color: "#fff"
				},
				//轮播图
				list: [],
				//消息列表
				noticeList: [],
				//开仓数据
				openPositions:{},
				tabs: ["过去24小时开仓", "全部开仓"],
				tabActive: 0,
				chartData1: {},
				chartData2: {},
				chartData3: {},
				//行情
				priceList:[],
				kuaixun:[],
				xinwen:[],
				web_name:''
			}
		},
		onLoad() {
		
		},
		async onLoad(){
			try{
			  let res=await this.$u.api.depositInfoApi()
			  this.web_name=res.name
			}catch(e){
				//TODO handle the exception
			}
		},
		onShow() {
			this.chartData1 = _.cloneDeep(option)
			this.chartData2 = _.cloneDeep(option)
			this.chartData3 = _.cloneDeep(option)
			
			this.invokeHomeApi()
		},
		computed: {
			...mapState("user",["isMock"]),
			...mapGetters("user",["getToken","getDownColor","getUpColor"]),
			...mapGetters("recognize",["getRecognizeDialogShowed"]),
			c_openPositions(){
				if(!this.openPositions["24"]){
					return [[],[],[]]
				}
				else if(this.tabActive==0){
					return this.openPositions["24"].map(item=>{
						const total=parseFloat(item.zhang_)+parseFloat(item.die_)
						const duo_percent=total==parseFloat(0)?"50%":(parseFloat(item.zhang_)/(total)*100).toFixed(3)+"%"
						const kong_percent=total==parseFloat(0)?"50%":(parseFloat(item.die_)/(total)*100).toFixed(3)+"%"
						return [item.name,duo_percent,kong_percent]
					})
				}
				else if(this.tabActive==1){
					return this.openPositions["all"].map(item=>{
						const total=parseFloat(item.zhang_)+parseFloat(item.die_)
						const duo_percent=total==parseFloat(0)?"50%":(parseFloat(item.zhang_)/(total)*100).toFixed(3)+"%"
						const kong_percent=total==parseFloat(0)?"50%":(parseFloat(item.die_)/(total)*100).toFixed(3)+"%"
						return [item.name,duo_percent,kong_percent]
					})
				}
			},
			getAccount() {
				if (!this.getToken) {
					return ["一键登录/开户", "极速开户，领取50000练习金"]
				} 
				else if(this.isMock){
					return ["切换真实账户","存款后即可交易"]
				}
				else {
					return ["账号存款", "存款后即可交易"]
				}
			}
		},
		methods: {
			...mapMutations("recognize",["setRecognizeDialogShowed"]),
			...mapMutations("user",["modifyIsMock"]),
			handleNews(index){
				console.log(this.noticeList[index])
				// this.$Router.push({path:"/pages/news/news",query:{richText:this.kuaixun[index].content}})
				
				
				uni.setStorageSync('new_info', JSON.stringify(this.kuaixun[index]).replace(/%/g,'%25'));
				this.$Router.push({path:'/pages/news/news'})
			},
			copy(value){
				uni.setClipboardData({
				    data: value,
				    success: function () {
				        uni.showToast({
				        	icon:"success",
							title:"QQ95766229复制成功"
				        })
				    }
				});
			},
			toRecognize(){
				this.$Router.push("/pages/recognize/recognize")
			},
			toStockDetail(item){
				this.$Router.push({path:'/pages/stockDetail/stockDetail',query:{id:item.pid,name:item.name}})
			},
			//切换真实账户，
			toSwitchAccount(){
				this.modifyIsMock(false)
			},
			//邀请好友
			inviteJoin(){
				if (!this.getToken){
					this.loginDialogFlag=true
				}
				else{
					this.$Router.push("/pages/shareJoin/shareJoin")
				}
			},
			setChartData(){
				if(this.tabActive==0){
					this.chartData1.series[0].data =[{value:this.openPositions["24"][0].zhang_},{value:this.openPositions["24"][0].die_}]
					this.chartData2.series[0].data =[{value:this.openPositions["24"][1].zhang_},{value:this.openPositions["24"][1].die_}]
					this.chartData3.series[0].data =[{value:this.openPositions["24"][2].zhang_},{value:this.openPositions["24"][2].die_}]
				}
				else{
					this.chartData1.series[0].data =[{value:this.openPositions["all"][0].zhang_},{value:this.openPositions["all"][0].die_}]
					this.chartData2.series[0].data =[{value:this.openPositions["all"][1].zhang_},{value:this.openPositions["all"][1].die_}]
					this.chartData3.series[0].data =[{value:this.openPositions["all"][2].zhang_},{value:this.openPositions["all"][2].die_}]
				}
			},
			//跳转登入页
			toLogin(){
				this.$Router.push({name:"login",query:{redirect:"/pages/index/index"}})
			},
			handleAccount(){
				// 如果未登入,则去登入
				if (!this.getToken){
					this.toLogin()
				}
				//如果是模拟账号，弹出切换真实账号弹窗
				else if(this.isMock) {
					this.switchAccountDialogFlag=true
				}
				else{
					this.$Router.push("/pages/deposit/deposit")
				}
			},
			//认证弹窗关闭回调
			recognizePopupClose(){
				this.setRecognizeDialogShowed(1)
			},
			async invokeHomeApi() {
				try {
					const {banner,shiming,kuaixun,kaicang,pro_data,xinwen} = await this.$u.api.homeApi()
					//轮播图
					this.list=banner
					this.xinwen=xinwen
					//已经登入但未实名，弹出实名弹框（只弹一次）
					if(this.getToken&&!shiming&&!this.getRecognizeDialogShowed){
						this.recognizeFlag=true
					}
					else if(this.getToken&&shiming){
						this.isRecognizeComplate=true
					}
					this.noticeList=kuaixun.map(item=>item.title)
					this.kuaixun=kuaixun
					//开仓数据
					this.openPositions=kaicang
					this.setChartData()
					//行情
					this.priceList=pro_data
				} catch (e) {
					//TODO handle the exception
				}
			},
			handleTabChange(index) {
				if (this.tabActive == index) {
					return
				}
				this.tabActive = index
				this.setChartData()
			}
		}
	}
</script>
<script module="echarts" lang="renderjs">
	let myChart1
	let myChart2
	let myChart3
	let echartElement1
	let echartElement2
	let echartElement3
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				echartElement1 = document.getElementById('echarts-1')
				myChart1 = echarts.init(echartElement1)
				myChart1.setOption(this.chartData1)

				echartElement2 = document.getElementById('echarts-2')
				myChart2 = echarts.init(echartElement2)
				myChart2.setOption(this.chartData2)

				echartElement3 = document.getElementById('echarts-3')
				myChart3 = echarts.init(echartElement3)
				myChart3.setOption(this.chartData3)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				switch (instance.$el) {
					case echartElement1:
						myChart1.setOption(newValue)
						break
					case echartElement2:
						myChart2.setOption(newValue)
						break
					case echartElement3:
						myChart3.setOption(newValue)
						break
					default:
						break
				}
			},

		}
	}
</script>
<style lang="scss">
	.hangqing-kuai{
		padding: 0 20rpx;
	}
	.container {
		.custom-navigation {
			padding: 20rpx 30rpx;
			background-color: #fff;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #000000;
			}
		}

		.header-wrapper {
			padding: 0 30rpx 20rpx;
			background-color: #FFFFFF;

			.recognize-tip-wrapper {
				margin-bottom: 20rpx;
				padding: 0 30rpx;
				height: 60rpx;
				background: #E7F1FF;
				border-radius: 10rpx;
				border: 1rpx solid rgba(35, 145, 255, 0.36);

				.recognize-text {

					font-size: 24rpx;
					color: $color-blue;

				}
			}

			.swiper {
				
				height: 280rpx;
			}

			.menu-wrapper {
				margin: 20rpx 0 0;

				.menu-option {
					padding-left: 40rpx;
					width: 334rpx;
					height: 168rpx;

					&:first-child {
						background: url("~@/static/images/home/menu-bg-1.png");
						background-size: 100% 100%;
					}

					&:last-child {
						background: url("~@/static/images/home/menu-bg-2.png");
						background-size: 100% 100%;
					}

					.title {
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

					.desc {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}

		}

		.stock-news {
			padding: 46rpx 30rpx 0;

			.header {
				.title {
					margin-right: 10rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #0F1222;
				}

				.notice-bar {
					flex: 1;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.stock-list {
				margin-top: 24rpx;

				.stock-item {
					padding: 30rpx 10rpx;
					width: 226rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.04);
					border-radius: 12rpx;

					.stock-name {
						font-size: 28rpx;
						font-weight: 400;
						color: #666666;
						text-align: center;
						line-height: 40rpx;
					}

					.stock-value {
						margin-top: 4rpx;
						font-size: 36rpx;
						font-weight: 500;
						text-align: center;
						color: #333333;
						line-height: 50rpx;
					}

					.fluctuate {
						font-size: 24rpx;
						line-height: 34rpx;
					}

					.percent {
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
			}
		}

		.order-total {
			padding: 46rpx 30rpx 20rpx;

			.header {
				.title {
					margin-right: 10rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #0F1222;
				}
			}

			.order-list {
				margin-top: 14rpx;
			}

			.order-item {
				padding: 30rpx 20rpx;
				width: 226rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.04);
				border-radius: 12rpx;

				.charts-box {
					position: relative;

					.order-text-wrapper {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);

						.order-text {
							font-size: 24rpx;
							color: #333;
							line-height: 34rpx;
						}
					}
				}

				.echarts {
					width: 124rpx;
					height: 124rpx;
				}

				.dot-blue {
					margin-right: 14rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: $color-blue;
				}

				.dot-orange {
					margin-right: 14rpx;
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: #FF6010;
				}

				.order-percent {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
		.news-list{
				padding: 46rpx 30rpx 20rpx;
				.header {
					.title {
						margin-right: 10rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #0F1222;
					}
					.more-text{
						margin: 0 10rpx 0 auto;
						font-size: 24rpx;
						color: #999999;
					}
				}
				.news-list-content{
					position: relative;
					margin-top: 15rpx;
					padding: 65rpx 20rpx 30rpx;
					background-color: #fcf2f2;
					border-radius: 15rpx;
					border: 2rpx solid #fcf2f5;
					.hot-icon{
						position: absolute;
						left: 0;
						top: 0;
						height: 50rpx;
						width: 170rpx;
						background: url("~@/static/images/home/hot-icon.png");
						background-size: 100% 100%;
					}
					.stock-title{
						font-size: 30rpx;
						color: #575383;
					}
					.stock-item{
						margin-bottom: 30rpx;
						&:last-child{
							margin-bottom:0;
						}
						.stock-time{
							margin-left: 40rpx;
							font-size: 24rpx;
							color: #999;
							flex-shrink: 0;
						}
					}
				}
		}
		.recognize-wrapper{
			padding: 20rpx;
			width: 630rpx;
		}
		.recognize-bg {
			width: 456rpx;
			height: 368rpx;
			background: url("~@/static/images/home/recognize-icon.png");
			background-size: 100% 100%;
		}

		.recognize-tip-text {
			margin-top: 18rpx;
			width: 504rpx;
			font-size: 36rpx;
			color: #0F1222;
			line-height: 50rpx;
		}

		.service-btn {
			width: 260rpx;
			height: 90rpx;
			border-radius: 50rpx;
			border: 2rpx solid $color-blue;
			margin-right: 50rpx;
			color: $color-blue;
			font-size: 30rpx;
			line-height: 90rpx;
			text-align: center;
			box-sizing: border-box;
		}

		.recognize-btn {
			width: 260rpx;
			height: 90rpx;
			background: $color-blue;
			border-radius: 50rpx;
			font-size: 30rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
		}
	}
</style>
